<template>

	<view class="content">
		<view class="content-no" v-if="list.length == 0">
			<view>
				<img src="/static/img/cart/no_goods.png" mode="widthFix">
			</view>
			<view>
				<img @click="goGoods" style="width:30%" src="/static/img/cart/goGoods.png" mode="widthFix">
			</view>
		</view>
		<view v-else class="content-list">
			<!-- #ifdef MP-WEIXIN -->
			<view style="margin: 0 auto;width: 94%;padding-bottom: 20upx;">
				<van-checkbox-group :value="result" @change="onChange">
					<van-checkbox v-for="(item,index) in list" :key="index" :name="item.id">
						<view class="cart-info">
							<img class="cart-info-item-img" style="width:160upx;height:150upx;margin: 0 10upx" :src="demoUrl + item.goodsSku.image"></img>
							<view class="cart-info-item">
								<view style="width: 80%;font-weight:bold;font-size:28upx;overflow: hidden;white-space:nowrap;text-overflow: ellipsis;">{{item.goodsName}}</view>
								<img style="width: 38upx;height: 38upx;float: right;margin-right:70upx;margin-top: -50upx;" src="/static/img/cart/delet.png"
								 mode="widthFix" @click.stop="deletData(item.id)">
								<view style="margin:3upx 0;font-size:22upx;color:#9D9C9C;"><text style="padding:2upx 8upx;"></text></view>
								<view>
									<text style="font-weight:bold;color:#FE4D3D;margin-top: 20upx;">￥{{item.goodsSkuPrice}}</text>
									<view class="stepperNum">
										<text :data-index="index" :data-id="item.goodsId" :data-sku="item.goodsSkuId" class="stepperNum-item"
										 @click.stop='minus(index)'>-</text>
										<input disabled type='number' class="stepperNum-item0" :value='item.goodsSkuNum'></input>
										<text :data-index="index" :data-id="item.goodsId" :data-sku="item.goodsSkuId" class="stepperNum-item"
										 @click.stop='plus(index)'>+</text>
									</view>
								</view>
							</view>
						</view>
					</van-checkbox>
				</van-checkbox-group>
				<view v-if="list.length>0" style="background-color: #fff;text-align: right;margin-top: 20upx;padding: 20upx;border-radius: 5px;">合计：￥{{price}}</view>
			</view>
			<!-- #endif -->
			<view class="_tabbar" v-if="list.length>0">
				<view class="_tabbar_1" @click="goIndex">
					<img src="/static/img/index/tabBar1_1.png" mode="widthFix"><br>
					<text>首页</text>
				</view>
				<view class="_tabbar_2">
					<text @click="onClickButton">立即购买</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				demoUrl: '',
				list: [],
				result: [],
				selectArr: [],
				price: 0,
				num: 1,
			}
		},
		onLoad() {
			let userId = wx.getStorageSync('userId');
			let userInfo = wx.getStorageSync('userInfo');
			// if (!userId || !userInfo) {
			//   uni.reLaunch({
			// 	url: '/pages/my/my',
			//   })
			//   return false;
			// }
			this.getcartList();
		},
		onHide() {
			uni.showTabBar({})
		},
		onUnload() {
			uni.showTabBar({})
		},
		onShow() {
			if (this.list.length > 0) uni.hideTabBar({})
		},
		mounted() {},
		methods: {
			getcartList: function() {
				let that = this;
				uni.showLoading({
					title: '',
					mask: true
				})
				this.$api.getcartList({
					"userId": wx.getStorageSync('userId')
				}).then((res) => {
					uni.hideLoading();
					if (res.data.code === 1) {
						console.log(res.data)
						that.list = res.data.data
						if (that.list.length > 0) uni.hideTabBar({})
						if (that.result.length > 0) {
							let selectArr = [];
							res.data.data.forEach(function(item, index) {
								that.result.forEach(function(item1, index1) {
									if (item.id == item1) {
										selectArr.push(item)
									}
								})
							})
							that.selectArr = selectArr;
							that.getPrice();
						}
					}

				}).catch((err) => {
					uni.hideLoading()
					console.log('request fail', err);
				})
			},
			getPrice() {
				var price = 0
				this.selectArr.forEach(function(item, index) {
					price += (Number(item.goodsSkuPrice)) * (Number(item.goodsSkuNum))
				})
				this.price = price;
			},
			minus(index, nums, id) {
				let that = this;
				let istate = -1;
				let list = this.list;
				let num = list[index].goodsSkuNum;
				num--
				uni.showLoading({
					title: '',
					mask: true
				})
				if (num == 0 || num < 0) {
					istate = 0
				} else {
					istate = -1
				}
				that.$api.updatecartGoods({
					userId: uni.getStorageSync('userId'),
					cartId: id ? id : list[index].id,
					istate: istate,
				}).then((res) => {
					uni.hideLoading()
					if (res.data.code == 1) {
						that.getcartList();
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
					}
				})
			},
			plus(index) {
				let that = this;
				let list = this.list;
				let num = list[index].goodsSkuNum;
				num++;
				if (list[index].goodsSku.limitBuy > 0 && num > list[index].goodsSku.limitBuy) {
					uni.showToast({
						title: '超过限购数量',
						icon: 'none'
					});
					return false;
				} else {
					uni.showLoading({
						title: ' ',
						mask: true
					})
					that.$api.updatecartGoods({
						userId: uni.getStorageSync('userId'),
						cartId: list[index].id,
						istate: 1,
					}).then((res) => {
						uni.hideLoading()
						if (res.data.code == 1) {
							that.getcartList();
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							});
						}
					})
				}
			},
			deletData(id) {
				let that = this;
				uni.showModal({
					title: '消息提示',
					content: '是否删除当前商品？',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: ' ',
								mask: true
							})
							that.$api.updatecartGoods({
								userId: uni.getStorageSync('userId'),
								cartId: id,
								istate: 0,
							}).then((res) => {
								uni.hideLoading()
								if (res.data.code == 1) {
									that.getcartList();
								} else {
									uni.showToast({
										title: res.data.msg,
										icon: 'none'
									});
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			onClickButton() {
				if (this.selectArr.length > 0) {
					uni.setStorageSync('selectCarts', this.selectArr)
					uni.navigateTo({
						url: "/pages/orderInfo/orderInfo?cartId=1",
					})
				} else {
					uni.showToast({
						title: '您还没有选择商品',
						icon: 'none'
					});
				}
			},
			onChange(event) {
				// event.detail
				this.result = event.detail
				let list = this.list;
				let arr = [];
				event.detail.forEach(function(item, index) {
					list.forEach(function(item1, index1) {
						if (item == item1.id) {
							arr.push(item1)
						}
					});
				});
				this.selectArr = arr;
				console.log('选中的数据', this.selectArr)
				this.getPrice();
			},
			goGoods() {
				uni.switchTab({
					url: '/pages/goods/goods'
				});
			},
			goIndex() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			},

		}
	}
</script>

<style>
	._tabbar {
		position: fixed;
		bottom: 0upx;
		background-color: #FFFFFF;
		height: 100upx;
		line-height: 100upx;
		display: flex;
		width: 100%;
		text-align: center;
	}

	._tabbar_1 {
		flex: 1;
		text-align: center;
		line-height: 30upx;
		padding: 10upx 0;
	}

	._tabbar_1 img {
		width: 50upx;
		text-align: center;
	}

	._tabbar_2 {
		flex: 1;
		line-height: 82upx;
		padding: 10upx;
		box-sizing: border-box;
	}

	._tabbar_2 text {
		/* display: inline-block; */
		padding: 20upx 100upx;
		background: #000000;
		color: #FEECC1;
		border-radius: 50upx;
		font-weight: bold;
	}

	.content {
		height: 100%;
		box-sizing: border-box;
		position: relative;
	}

	.content-no {
		text-align: center;
		padding: 20% 0;
	}

	.content-no img {
		width: 40%;
		margin: 6upx;
	}

	.content-list {
		box-sizing: border-box;
		position: relative;
		padding-top: 20upx;
	}

	.van-checkbox {
		background-color: white;
		padding: 20upx 10upx;
		box-sizing: border-box;
		position: relative;
		border-bottom: 1px solid #F2F2F2;
		border-radius: 3px;
	}

	.cart-info {
		width: 750upx;
	}

	.cart-info-item-img {
		float: left;
		width: 30%;
	}

	.cart-info-item {
		width: 68%;
		float: left;
	}

	.stepperNum {
		position: absolute;
		right: 40upx;
		bottom: 12upx;
	}

	.stepperNum-item0 {
		float: left;
		width: 50upx;
		text-align: center;
	}

	.stepperNum-item {
		text-align: center;
		float: left;
		background-color: #ccc;
		padding: 0 8upx 8upx 8upx;
		width: 25upx;
		height: 40upx;
		border-radius: 5upx;
	}

	van-checkbox-group .van-checkbox__icon--round {
		margin-top: 26px;
	}

	van-checkbox-group .van-checkbox__icon--checked {
		background-color: #000;
		border-color: #000;
	}
</style>
